<!-- 省市区选择组件使用示例 -->
<template>
  <view class="min-h-screen bg-gray-50 p-6">
    <!-- 页面标题 -->
    <view class="mb-8">
      <text class="text-[36rpx] font-bold text-gray-900 text-center">省市区选择组件示例</text>
    </view>

    <!-- 示例内容 -->
    <view class="space-y-8">
      <!-- 仅选择省份示例 -->
      <view class="bg-white rounded-2xl p-6 shadow-sm">
        <view class="text-[32rpx] font-semibold text-gray-900 mb-2">仅选择省份</view>
        <view class="text-[24rpx] text-gray-500 mb-6">mode="province" - 只能选择省份</view>
        
        <CityPicker
          mode="province"
          placeholder="请选择省份"
          title="省份选择"
          @confirm="handleProvinceConfirm"
          @cancel="handleCancel"
        />
        
        <view v-if="provinceResult" class="mt-4 p-4 bg-blue-50 rounded-xl border border-blue-200">
          <text class="text-[24rpx] text-blue-600 font-medium">选择结果：</text>
          <text class="text-[28rpx] text-blue-800 ml-2">{{ provinceResult.province?.name }}</text>
        </view>
      </view>

      <!-- 选择省市示例 -->
      <view class="bg-white rounded-2xl p-6 shadow-sm">
        <view class="text-[32rpx] font-semibold text-gray-900 mb-2">选择省市</view>
        <view class="text-[24rpx] text-gray-500 mb-6">mode="city" - 可以选择省份和城市</view>
        
        <CityPicker
          mode="city"
          placeholder="请选择省市"
          title="省市选择"
          @confirm="handleCityConfirm"
          @cancel="handleCancel"
        />
        
        <view v-if="cityResult" class="mt-4 p-4 bg-blue-50 rounded-xl border border-blue-200">
          <text class="text-[24rpx] text-blue-600 font-medium">选择结果：</text>
          <text class="text-[28rpx] text-blue-800 ml-2">
            {{ cityResult.province?.name }} {{ cityResult.city?.name }}
          </text>
        </view>
      </view>

      <!-- 带默认值示例 -->
      <view class="bg-white rounded-2xl p-6 shadow-sm">
        <view class="text-[32rpx] font-semibold text-gray-900 mb-2">带默认值</view>
        <view class="text-[24rpx] text-gray-500 mb-6">设置默认选中的省份和城市</view>
        
        <CityPicker
          mode="city"
          placeholder="请选择省市"
          title="省市选择（默认值）"
          default-province-code="440000"
          default-city-code="440300"
          @confirm="handleDefaultConfirm"
          @cancel="handleCancel"
        />
        
        <view v-if="defaultResult" class="mt-4 p-4 bg-blue-50 rounded-xl border border-blue-200">
          <text class="text-[24rpx] text-blue-600 font-medium">选择结果：</text>
          <text class="text-[28rpx] text-blue-800 ml-2">
            {{ defaultResult.province?.name }} {{ defaultResult.city?.name }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CityPicker from './CityPicker.vue'

/**
 * 选择结果类型定义
 */
interface SelectionResult {
  province?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
  city?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
}

// 响应式数据
const provinceResult = ref<SelectionResult | null>(null)
const cityResult = ref<SelectionResult | null>(null)
const defaultResult = ref<SelectionResult | null>(null)

/**
 * 处理省份选择确认
 * @param result 选择结果
 */
const handleProvinceConfirm = (result: SelectionResult) => {
  console.log('省份选择结果:', result)
  provinceResult.value = result
  
  // 显示选择结果提示
  uni.showToast({
    title: `已选择：${result.province?.name}`,
    icon: 'success',
    duration: 2000
  })
}

/**
 * 处理省市选择确认
 * @param result 选择结果
 */
const handleCityConfirm = (result: SelectionResult) => {
  console.log('省市选择结果:', result)
  cityResult.value = result
  
  // 显示选择结果提示
  const cityName = result.city ? ` ${result.city.name}` : ''
  uni.showToast({
    title: `已选择：${result.province?.name}${cityName}`,
    icon: 'success',
    duration: 2000
  })
}

/**
 * 处理默认值选择确认
 * @param result 选择结果
 */
const handleDefaultConfirm = (result: SelectionResult) => {
  console.log('默认值选择结果:', result)
  defaultResult.value = result
  
  // 显示选择结果提示
  const cityName = result.city ? ` ${result.city.name}` : ''
  uni.showToast({
    title: `已选择：${result.province?.name}${cityName}`,
    icon: 'success',
    duration: 2000
  })
}

/**
 * 处理取消选择
 */
const handleCancel = () => {
  console.log('取消选择')
  uni.showToast({
    title: '已取消选择',
    icon: 'none',
    duration: 1500
  })
}
</script>

